<template>
    <div class="xtx-city" ref="target">
        <!-- 点一下切换显示隐藏效果 -->
        <div class="select"  @click="toggle" :class="{ active }">
            <!-- 接收父组件传递的city 渲染 -->
            <span class="value" v-if="city">{{city}}</span>
            <span class="placeholder" v-else>请选择配送地址</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <!-- active为true显示 -->
        <div class="option" v-show="active">
            <span class="ellipsis" v-for="item in cityList" :key="item.code" @click="selectCity(item)">{{item.name}}</span>
        </div>
    </div>
</template>

<script lang="ts" setup name="XtxCity">
    import { ref ,watch} from 'vue'
    import { onClickOutside } from '@vueuse/core'
    import { AreaList } from '@/types/good'
    // 城市数据并不是接口服务器中获取,而是用axios向阿里云服务器获取数据
    import axios from 'axios'
    import {IChangeResult} from '@/types/data'
    // 定义变量，控制城市的显示和隐藏
    const active = ref(false)
    // 取反
    const toggle = () => {
        active.value = !active.value
    }
    // 点击弹层外部，关闭弹层
    const target = ref(null)
    onClickOutside(target, () => {
        active.value = false
    })
    // 城市列表
    const cityList = ref<AreaList[]>()
    // 缓存数据的变量
    const cacheList = ref<AreaList[]>([])
    // 接收父组件数据
    defineProps<{
        city?: string
    }>()
    const getCityList = async () => {
        const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
        cityList.value = res.data
        cacheList.value = res.data
    }
    getCityList()

    const changeResult = ref({
        provinceCode: '',
        provinceName: '',
        cityCode: '',
        cityName: '',
        countyCode: '',
        countyName: '',
    })

    // 切换城市数据,记录选中的内容
    const selectCity = (city: AreaList) => {
        if (city.level === 0) {
            // 省
            changeResult.value.provinceName = city.name
            changeResult.value.provinceCode = city.code
            cityList.value = city.areaList
        }
        if (city.level === 1) {
            // 市
            changeResult.value.cityName = city.name
            changeResult.value.cityCode = city.code
            cityList.value = city.areaList
        }
        if (city.level === 2) {
            // 县（区）
            changeResult.value.countyName = city.name
            changeResult.value.countyCode = city.code
            // 关闭弹窗
            active.value = false
            // 把选择到的信息传递到父组件 父组件更新city变量
            emits('changeCity',changeResult.value)
        }
        // 把点击的当前项的 areaList 给 areaList
        cityList.value = city.areaList
    }
    watch(active, (newValue) => {
        if (newValue) {
            // 如果打开了，就把缓存的数据给 areaList
            cityList.value = cacheList.value
        }
    })
    // 创建emits 目的是修改外部city
    const emits = defineEmits<{
        (e: 'changeCity', r:IChangeResult):void
    }>()
</script>

<style scoped lang="less">
    .xtx-city {
        display: inline-block;
        position: relative;
        z-index: 400;
        .select {
            border: 1px solid #e4e4e4;
            height: 30px;
            padding: 0 5px;
            line-height: 28px;
            cursor: pointer;
            &.active {
                background: #fff;
            }
            .placeholder {
                color: #999;
            }
            .value {
                color: #666;
                font-size: 12px;
            }
            i {
                font-size: 12px;
                margin-left: 5px;
            }
        }
        .option {
            width: 542px;
            border: 1px solid #e4e4e4;
            position: absolute;
            left: 0;
            top: 29px;
            background: #fff;
            min-height: 30px;
            line-height: 30px;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            > span {
                width: 130px;
                text-align: center;
                cursor: pointer;
                border-radius: 4px;
                padding: 0 3px;
                &:hover {
                    background: #f5f5f5;
                }
            }
        }
    }
</style>